<template>
  <div style="width: 100%; height: 100%">
    <ElementDialog title="关联菜单权限" :close-on-click-modal="false" width="80%" :visible.sync="visible">
      <ElForm :inline="true">
        <ElFormItem label="菜单名称" prop="menuName">
          <ElInput
            v-model="menuName"
            placeholder="请输入菜单名称"
            clearable
            size="small"
            @keyup.enter.native="getList" />
        </ElFormItem>
        <ElFormItem>
          <ElButton type="primary" icon="el-icon-search" @click="getList">搜索</ElButton>
        </ElFormItem>
      </ElForm>
      <ElTable
        v-loading="listLoading"
        border
        :data="menuList"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildrens' }">
        <ElTableColumn prop="name" label="菜单名称" :show-overflow-tooltip="true" width="200" />
        <ElTableColumn prop="path" label="请求路径" :show-overflow-tooltip="true" width="280" />
        <ElTableColumn prop="menuStatus" label="关联状态" align="center" width="120">
          <template #default="scope">
            <ElTag v-if="scope.row.menuStatus === '0'" type="info">未关联</ElTag>
            <ElTag v-if="scope.row.menuStatus === '1'">已关联</ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn prop="dataScope" label="数据权限">
          <template #default="scope">
            <ElRadio v-for="item in dataScopeList" :key="item.value" v-model="scope.row.dataScope" :label="item.value">
              {{ item.label }}
            </ElRadio>
            <ElButton type="text" size="small" icon="el-icon-check" @click="rowSave(scope.row, scope.index)">
              保存
            </ElButton>
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作" align="center" class-name="small-padding fixed-width" width="240">
          <template #default="scope">
            <ElButton
              v-if="scope.row.menuStatus === '0'"
              type="text"
              size="small"
              icon="el-icon-edit"
              @click="innerRoleMenu(scope.row, scope.index)">
              关联
            </ElButton>
            <ElButton
              v-if="scope.row.menuStatus === '1'"
              type="text"
              size="small"
              icon="el-icon-edit"
              @click="relieveRoleMenu(scope.row, scope.index)">
              解除关联
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </ElementDialog>
  </div>
</template>

<script>
  import { getMenuRoleTree, updateMenuDataScope, innerRoleMenu, relieveRoleMenu } from '@/api/admin/menu'

  export default {
    name: 'MenuRoleTable',
    data() {
      return {
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 50 // 每页显示多少条
        },
        listLoading: true,
        searchForm: {},
        dialogPermissionVisible: false,
        visible: false,
        menuList: [],
        menuName: '',
        roleId: '-1',
        dataScopeList: [
          {
            label: '全部',
            value: 0
          },
          {
            label: '本级及子级',
            value: 2
          },
          {
            label: '本级',
            value: 3
          },
          {
            label: '当前用户权限',
            value: 4
          }
        ]
      }
    },
    methods: {
      getList() {
        const params = { roleId: this.roleId, menuName: this.menuName }
        this.listLoading = true
        getMenuRoleTree(params).then(response => {
          this.menuList = response.data.data
          this.listLoading = false
        })
      },
      refreshChange() {
        this.getList()
      },
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        const params = {
          roleId: this.roleId,
          menuName: form.name,
          dataScope: form.dataScope,
          menuStatus: form.menuStatus
        }
        this.getList(params)
        done()
      },
      handleOpenBefore(show) {
        this.getList()
        show()
      },
      cancal() {
        this.dialogPermissionVisible = false
      },
      showMenuRoleTable(roleId) {
        this.visible = true
        this.roleId = roleId
        this.getList()
      },
      update(row, index, done, loading) {
        // 修改数据权限。
        updateMenuDataScope({
          id: row.id,
          menuName: row.name,
          dataScope: row.dataScope
        })
          .then(() => {
            this.getList()
            done()
            this.$notify.success('修改成功')
          })
          .catch(() => {
            loading()
          })
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      currentChange(current) {
        this.page.currentPage = current
      },
      innerRoleMenu(row, index) {
        const obj = {
          roleId: this.roleId,
          menuId: row.id
        }
        innerRoleMenu(obj).then(response => {
          if (response.data.data) {
            row.menuStatus = '1'
            this.$message.success('关联成功。')
          }
        })
      },
      rowSave(row, index) {
        updateMenuDataScope({
          id: row.id,
          menuName: row.name,
          dataScope: row.dataScope
        })
          .then(() => {
            this.$notify.success('修改成功')
          })
          .catch(() => {})
      },
      relieveRoleMenu(row, index) {
        const obj = {
          roleId: this.roleId,
          menuId: row.id
        }
        relieveRoleMenu(obj).then(response => {
          if (response.data.data) {
            row.menuStatus = '0'
            this.$message.success('解除成功。')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-dialog__wrapper {
    .el-dialog {
      width: 61% !important;

      .dialog-main-tree {
        max-height: 400px;
        overflow-y: auto;
      }
    }

    .el-form-item__label {
      width: 20% !important;
      padding-right: 20px;
    }

    .el-form-item__content {
      margin-left: 20% !important;
    }
  }
</style>
